<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="contractNumber" label="合同编号" width="120" />
        <el-table-column prop="contractSubject" label="合同主题" width="120" />
        <el-table-column prop="clientNumber" label="客户名称" width="120" />
        <el-table-column prop="agencyTime" label="签约日期" width="120" :formatter="formatDate" />
        <el-table-column prop="salespeople" label="销售人员" width="120" />
        <el-table-column prop="contractSum" label="合同总额" width="120" />
        <el-table-column prop="preferentialSum" label="优惠额度" width="120" />
        <el-table-column prop="preferentialAfterSum" label="优惠后总金额" width="120" />
        <el-table-column fixed="right" label="操作" min-width="150">
            <template #default="scope">
                <el-button link type="danger" :icon="Delete" size="small" @click="Del(scope.row.detailsId)">删除</el-button>
                <el-button link type="warning" :icon="Edit" size="small">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[15, 20, 25, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { Wread, Wwrite } from "@/axios/axiosHelper"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const router = useRouter();

const tableData = ref([]);

const form = reactive({
    pageIndex: 1,
    pageSize:15,
    totalCount: 0,
    totalPage: 0,
})

const handleSizeChange = (val: number) => {
    Show();
}
const handleCurrentChange = (val: number) => {
    Show();
}

onMounted(()=>{
    Show();
})

const Show = () => {
    axios.get("https://localhost:7095/api/Details/QueryDetails",{
        params:{
            pageIndex:form.pageIndex,
            pageSize:form.pageSize
        }
    })
    .then(res=>{
        tableData.value = res.data.data;
        form.totalCount = res.data.totalCount;
        form.totalPage = res.data.totalPage;
    })
}

const formatDate = (row: any, column: any, cellValue: string) => {
    const date = new Date(cellValue);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

const Del=(detailsId:any)=>{
    ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("https://localhost:7114/api/Details/DelDetails",{
        detailsId:detailsId
      })
      .then(res=>{
        if(res.data.code==100){
            ElMessage.success(res.data.msg);
            Show();
        }
        else{
            ElMessage.error(res.data.msg);
            return;
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>   